<template>
  <div class="marchart">
    <div class="title flex">
      <div>
        <h2>{{ info.name }}</h2>
        <div class="flex">
          <van-rate
            v-model="info.score"
            :size="20"
            allow-half
            void-icon="star"
            void-color="#eee"
            color="#ffd21e"
          />
          <div class="sellCount">月售{{ info.sellCount }}单</div>
        </div>
      </div>
      <div>
        <van-icon name="like" size="36" :color="starColor" />
        <p>已收藏</p>
      </div>
    </div>
    <div class="data flex">
      <div>
        <p>起送价</p>
        <div><span>20 </span>元</div>
      </div>
      <div>
        <p>商家配送</p>
        <div><span>8</span>元</div>
      </div>
      <div>
        <p>平均配送</p>
        <div><span>20 </span>分钟</div>
      </div>
    </div>
    <div class="bulletin">
      <p class="text">活动与公告</p>
      <p>{{ info.bulletin }}</p>
    </div>
    <div class="supports">
      <div v-for="(item, index) in info.supports" :key="index">
        <van-tag type="danger">折</van-tag>
        <span class="text">{{ item }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { store } from "../apis/order";
export default {
  data() {
    return {
      info: {},
      starColor: " #FF3300",
    };
  },
  created() {
    store().then((res) => {
      this.info = res.data.data;
      console.log(this.info);
    });
  },
};
</script>

<style lang="less" scoped>
.marchart {
  padding: 10px;
  .title {
    padding: 20px 10px;
    border-bottom: 1px solid #ccc;
    justify-content: space-between;
    h2 {
      font-size: 22px;
      padding-bottom: 6px;
    }
    .sellCount {
      padding-left: 10px;
      font-size: 14px;
    }
    p {
      font-size: 14px;
    }
  }
  .data {
    padding: 20px 0;
    justify-content: space-around;
    color: #ccc;
    border-bottom: 20px solid #f1f1f1;
    div {
      text-align: center;
      span {
        font-size: 26px;
        color: #333;
      }
    }
  }
  .bulletin {
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
    h1 {
      font-size: 30px;
    }
    p {
      font-size: 16px;
      color: #ff5c33;
    }
    .text {
      font-size: 28px;
      color: #333;
      padding-bottom: 10px;
    }
  }
  .supports {
    padding-top: 20px;
    div {
      padding: 10px;
      .text {
        padding-left: 20px;
      }
    }
  }
}
</style>